<script setup>
import { ref } from 'vue'

const vouchers = ref([{}])

import { getVoucherService, buyVoucherService } from '@/api/voucher.js';
import { ElMessage } from 'element-plus';
const getVoucher = async () => {
    let result = await getVoucherService()
    vouchers.value = result.data
}
getVoucher()

const buyVoucher = async (id) => {
    await buyVoucherService(id);
    ElMessage.success("抢购成功")
}
</script>
<template>
    <div style="display: flex;">
        <el-card class="card" v-for="(item, index) in vouchers" :key="index">
            <template #header>{{ item.name }}</template>
            <img :src="`https://dn-helper.oss-cn-hangzhou.aliyuncs.com/voucher` + index + `.png`" style="width: 100%;">
            <div class="font">库存：{{ item.stock }}</div>
            <div class="font">抢购时间：{{ item.beginTime }} 至 {{ item.endTime }}</div>
            <el-button class="button" type="primary" @click="buyVoucher(item.id)">立即抢购</el-button>
        </el-card>
    </div>
</template>
<style scoped>
.card {
    width: 30%;
    margin: 20px 20px;
}

::v-deep .el-card__body {
    padding: 0
}

.button {
    margin-left: 73%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.font {
    margin-left: 10px;
    margin-top: 5px;
    font-size: 15px;
}
</style>